<template>
<div class="img-main">
    <div class="img-content">
    <div class="filter-container">
      <el-input @keyup.enter.native="onsearch" style="width: 200px;" class="filter-item" placeholder="按照图片名称搜索" v-model="search.keyword"></el-input>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="onsearch">搜索</el-button>
    </div>
    <el-row :gutter="12">
      <el-col :span="4" v-for="item in listData" :key="item.id">
          <el-card :body-style="{ padding: '5px'}" :class="{'active': isActive === item.id}" class="body-style" @click.native="checkImg(item)">
          <img :src="item.image_url" onerror='this.src="http://wx.qlogo.cn/mmopen/C2rEUskXQiblFYMUl9O0G05Q6pKibg7V1WpHX6CIQaic824apriabJw4r6EWxziaSt5BATrlbx1GVzwW2qjUCqtYpDvIJLjKgP1ug/0"' class="image">
          <div class="keyword">
              <span>{{item.keyword}}</span>
          </div>
          </el-card>
      </el-col>
    </el-row>
<!-- // 分页 -->
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    </div>
</div>
</template>
<script>

import * as api from '@/api/main-api' // API
import waves from '@/directive/waves' // 水波纹指令

export default {
  name: 'imgTemp',
  directives: {
    waves
  },
  data() {
    return {
      isActive: '',
      search: {
        keyword: ''
      },
      listQuery: {
        page: 1,
        pagesize: 30,
        type: 1
      },
      total: 0,
      listData: []
    }
  },

  created() {
    this.fetchData()
  },

  methods: {
    checkImg(val) {
      this.isActive = val.id
      this.$emit('input-img', val.image_url)
    },

    // 搜索
    onsearch() {
      this.listQuery.page = 1
      // 复制一个对象<br>var obj = { a: 1 ,b:2};
      this.listQuery = Object.assign(this.listQuery, this.search)
      this.fetchData()
    },

    // 翻页
    handleSizeChange(val) {
      this.listQuery.pagesize = val
      this.fetchData()
    },

    // 跳页
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.fetchData()
    },

    // 获取数据
    fetchData() {
      return new Promise((resolve, reject) => {
        api.imgListApi(this.listQuery).then(response => {
          if (response.data.code === 0) {
            this.listData = response.data.data
            this.total = parseInt(response.data.total)
          }
        })
      })
    }

  }

}
</script>
<style scoped lang="scss">
   .img-main{
        height: 480px;
        overflow-y: auto;
        -ms-overflow-style: auto;
        -moz-box-shadow:3px 4px 20px #B8B8B8;
        -webkit-box-shadow:3px 4px 20px #B8B8B8;
        box-shadow:3px 4px 20px #B8B8B8;
    }
    .img-content{
        margin: 15px;
    }
    .body-style{
        margin-bottom:10px;
        text-align:center;
        padding-bottom: 10px;
        &.active{
          box-sizing:border-box;
	        -moz-box-sizing:border-box; /* Firefox */
	        border:1px solid red;
          background: rgba(103,194,58,.2)
        }
    }
    .keyword{
      padding: 2px;
      overflow-x: scroll;
      // text-overflow:ellipsis;
      white-space: nowrap;
      span{
        padding: 6px;
      }
    }
    .keyword::-webkit-scrollbar {
        display: none;
    }
   .image{
     width: 8rem;
     height: 8rem;
   }
</style>